<template>
	<el-date-picker
		v-model="content"
		type="datetimerange"
		range-separator="-"
		start-placeholder="开始时间"
		end-placeholder="结束时间"
		value-format="YYYY-MM-DD HH:mm:ss"
		:isPickerOptions="props.isPickerOptions"
		clearable
		:shortcuts="state.dateOptions"
		:disabled="disabled"
		@change="dateChange"
	>
		<template v-for="(index, name) in slots" v-slot:[name]="data">
			<slot :name="name" v-bind="data"></slot>
		</template>
	</el-date-picker>
</template>

<script lang="ts" setup>
import { reactive, computed, useSlots } from 'vue';

const props = defineProps({
	dateTime: {
		type: String,
		default: '',
	},
	shortcuts: {
		type: Array,
	},
	disabled: {
		type: Boolean,
		required: false,
		default: false,
	},
	isPickerOptions: {
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['update:dateTime', 'change']);

const content = computed<any>({
	get: () => {
		return props.dateTime.split(' - ');
	},
	set: (value: Event | any) => {
		if (value === null) {
			emit('update:dateTime', '');
		} else {
			emit('update:dateTime', value[0] + ' - ' + value[1]);
		}
	},
});

const slots = useSlots();

const state = reactive({
	dateOptions: props.shortcuts,
});

const getShortcuts = () => {
	return [
		{
			text: '今天',
			value: () => {
				const date = new Date();
				date.setHours(0, 0, 0, 0);
				const start = date.getTime();
				date.setHours(23, 59, 59, 999);
				const end = date.getTime();
				return [start, end];
			},
		},
		{
			text: '昨天',
			value: () => {
				const date = new Date();
				date.setDate(date.getDate() - 1);
				date.setHours(0, 0, 0, 0);
				const start = date.getTime();
				date.setHours(23, 59, 59, 999);
				const end = date.getTime();
				return [start, end];
			},
		},
		{
			text: '本月',
			value: () => {
				const date = new Date();
				const start_date = new Date(date.getFullYear(), date.getMonth(), 1);
				start_date.setHours(0, 0, 0);
				const start = start_date.getTime();
				const end_date = new Date(date.getFullYear(), date.getMonth() + 1, 0);
				end_date.setHours(23, 59, 59, 59);
				const end = end_date.getTime();
				return [start, end];
			},
		},
		{
			text: '上月',
			value: () => {
				const date = new Date();
				const start_date = new Date(date.getFullYear(), date.getMonth() - 1, 1);
				start_date.setHours(0, 0, 0);
				const start = start_date.getTime();
				const end_date = new Date(date.getFullYear(), date.getMonth(), 0);
				end_date.setHours(23, 59, 59, 59);
				const end = end_date.getTime();
				return [start, end];
			},
		},
		{
			text: '最近7天',
			value: () => {
				const date = new Date();
				date.setHours(23, 59, 59, 999);
				const end = date.getTime();
				date.setDate(date.getDate() - 7);
				date.setHours(0, 0, 0, 0);
				const start = date.getTime();
				return [start, end];
			},
		},
		{
			text: '最近30天',
			value: () => {
				const date = new Date();
				date.setHours(23, 59, 59, 999);
				const end = date.getTime();
				date.setDate(date.getDate() - 30);
				date.setHours(0, 0, 0, 0);
				const start = date.getTime();
				return [start, end];
			},
		},
		{
			text: '今年',
			value: () => {
				const date = new Date();
				const start_date = new Date(date.getFullYear(), 0, 1);
				start_date.setHours(0, 0, 0);
				const start = start_date.getTime();
				const end_date = new Date(date.getFullYear() + 1, 0, 0);
				end_date.setHours(23, 59, 59, 59);
				const end = end_date.getTime();
				return [start, end];
			},
		},
		{
			text: '去年',
			value: () => {
				const date = new Date();
				const start_date = new Date(date.getFullYear() - 1, 0, 1);
				start_date.setHours(0, 0, 0);
				const start = start_date.getTime();
				const end_date = new Date(date.getFullYear(), 0, 0);
				end_date.setHours(23, 59, 59, 59);
				const end = end_date.getTime();
				return [start, end];
			},
		},
	];
};

if (props.isPickerOptions) {
	state.dateOptions = getShortcuts();
}

const dateChange = (val: any[]) => {
	emit('change', val);
};
</script>